<<template>
  <div style="margin: 10px;">
    <el-row :gutter="10">
        <el-col :span="8">
            <el-card style="height: 300px;">
                <div class="title">
                    设备状态监测
                </div>
                <div style="text-align: center;">控制总数&nbsp;&nbsp;&nbsp;<span style="font-size: 18px;font-weight: bold;">{{ shebeiSum }}</span></div>
                <el-row :gutter="10">
                    <el-col :span="12" style=" text-align: center;">
                        <div class="shebeiTop">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="require('@/assets/img/start.png')"
                                >
                            </el-image>
                        </div>
                        <div class="shebeiTop">启用</div>
                        <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">98</div>
                    </el-col>
                    <el-col :span="12" style=" text-align: center;">
                        <div class="shebeiTop">
                            <el-image
                                style="width: 60px; height: 60px"
                                :src="require('@/assets/img/stop.png')"
                                >
                            </el-image>
                        </div>
                        <div class="shebeiTop">停用</div>
                        <div class="shebeiTop" style="font-size: 18px;font-weight: bold;">2</div>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;height: 400px;">
                <div class="title">
                    设计类型统计
                </div>
                <div class="qushiboxc">
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="7"><div class="ph-text"> 临时控制</div></el-col>
                        <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="90" :class="'green'"></el-progress></el-col>
                        <el-col :span="5">10</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="7"><div class="ph-text"> 按时间间隔浇水</div></el-col>
                        <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="80" color="#F59A23"></el-progress></el-col>
                        <el-col :span="5">9</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="7"><div class="ph-text"> 按月日浇水</div></el-col>
                        <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="68" color="#F59A23"></el-progress></el-col>
                        <el-col :span="5">8</el-col>
                    </el-row>
                    </div>
                    <div class="paihang-lanmu">
                    <el-row :gutter="20">
                        <el-col :span="7"><div class="ph-text"> 按周天浇水</div></el-col>
                        <el-col :span="12"><el-progress :text-inside="true" :stroke-width="16" :percentage="58" color="#00BFBF"></el-progress></el-col>
                        <el-col :span="5">7</el-col>
                    </el-row>
                    </div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="16">
            <el-card style="height: 300px;">
                <div class="title">
                    本月客流趋势
                </div>
                <div class="echartsbox" ref="echarts">
                    <div style="text-align:center;"><el-empty description="暂无相关数据" :image-size="80"></el-empty></div>
                </div>
            </el-card>
            <el-card style="margin-top: 10px;height: 400px;">
                <div class="title">
                    最新灌溉记录
                </div>
                <div class="cesuo-list">
						<el-table
						:data="tableData"
						style="width: 100%;font-size: 12px;"
						>
						<el-table-column
							prop="planName"
							label="计划名称"
							align="center">
						</el-table-column>
						<el-table-column
							prop="planType"
							label="计划类型"
							align="center">
						</el-table-column>
						<el-table-column
							prop="startDate"
							label="开始时间"
							align="center">
						</el-table-column>
						<el-table-column
							prop="endDate"
							label="结束时间"
							align="center">
						</el-table-column>
						<el-table-column
							prop="duration"
							label="浇水时长"
							align="center">
						</el-table-column>
						</el-table>
					</div>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
        shebeiSum:'100',
        tableData:[{
            planName:'计划一',
            planType:'按周天浇水',
            startDate:'2022/02/02 16:00',
            endDate:'2022/02/03 16:00',
            duration:'一天'
        },{
            planName:'计划一',
            planType:'按周天浇水',
            startDate:'2022/02/02 16:00',
            endDate:'2022/02/03 16:00',
            duration:'一天'
        },{
            planName:'计划一',
            planType:'按周天浇水',
            startDate:'2022/02/02 16:00',
            endDate:'2022/02/03 16:00',
            duration:'一天'
        },{
            planName:'计划一',
            planType:'按周天浇水',
            startDate:'2022/02/02 16:00',
            endDate:'2022/02/03 16:00',
            duration:'一天'
        }]
    }
  },
  mounted () {
   this.benyeukeliuqvshiEcharts()
  },
  created () {
  },
  methods: {
     //本月客流趋势
     benyeukeliuqvshiEcharts(){
        var echarts=this.$refs.echarts;
		  let myChart = this.$echarts.getInstanceByDom(
		    this.$refs.echarts
		  );
		  if (myChart == null) {
		    myChart = this.$echarts.init(echarts);
		  }
		  
		  var option;
          option = {
                color:'#6699ff',
                    tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    top:'20',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: false,
                },
                series: [
                    {
                    data: [120, 282, 111, 234, 220, 340, 310],
                    type: 'line',
                    areaStyle: {
                        opacity: 0.8,
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#3399ff'
                        },
                        {
                            offset: 0.5,
                            color: '#3399ff'
                        },
                        {
                            offset: 1,
                            color: '#ffffff'
                        }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    // smooth: true,
                    
                    }
                ]
            }
            option && myChart.setOption(option);
		  		//自适应屏幕大小
				window.addEventListener('resize', function() {
				myChart.resize()
			})
    }
  },
}
</script>
<style lang="scss" scoped>
.title{
	padding: 10px;
	font-weight: bold;
}
.shebeiTop{
    margin-top: 30px;
    font-size: 12px;
}
.echartsbox{
    width: 100%;
    height: 260px;
}
.paihang-lanmu{
  padding:15px 5px 15px 15px;
  .ph-text{
    font-size: 12px;
  }
  width: 100%;  // 进度条的父标签需要加个宽度，否则进度条可能会不显示
        .green {
          .el-progress-bar__inner {
            background-color: unset !important;  // 将进度条默认的颜色给去除掉，若不生效就再加个!important
            background-image: linear-gradient(90deg, #38f9d7 0%, #43e97b 100%);  // 给进度条加上渐变色
          }
        }
}
.ph-text{
	  font-size: 14px;
      text-align: right;
  }
</style>
